<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--
        通过自定义事件的形式 将父组件中的函数传递到子组件 从而实现子组件向父组件进行参数传递
        @sendmessage
-->
<div id="app">
    <h2>正在等待接收子组件中的参数>>{{ info }}</h2>
    <child @sendmessage="getmsg"></child>
</div>

<script>

    let child = {
        template: `
          <div class="box">
          <h5>姓名：{{ name }}</h5>
          <h5>年龄：{{ age }}</h5>
          <h5>专业：{{ major }}</h5>
          <button @click="sendmsg">发送信息给父组件</button>
          </div>
        `,
        data() {
            return {
                name: 'jack',
                age: 20,
                major: 'java',
                msg:'hello parent'
            }
        },
        methods: {
            sendmsg() {
                // console.log("发送信息给父组件"+this.msg)
                // 调用父组件传递的函数
                this.$emit('sendmessage',this.msg)
            }
        }
    }

    let vm = new Vue({
        el: '#app',
        data: {
            info: '...'
        },
        methods: {
            getmsg(message){
                console.log("父组件中的函数被调用")
                this.info = message
            }
        },
        components: {
            child
        }
    })
</script>
</body>
</html>